【OutSystems 11】 使い慣れたグリッド形式で大量のデータを表示・編集⁉ ～Data Gridチュートリアル編～

本記事では、OutSystemsにおけるData Gridの実装手順をご紹介します。

Data Gridの機能概要については「【OutSystems 11】 使い慣れたグリッド形式で大量のデータを表示・編集⁉ ～Data Grid概要編～」に掲載しています。ぜひ合わせてお読みください。

【OutSystems 11】 使い慣れたグリッド形式で大量のデータを表示・編集⁉ ～Data Gr...

https://www.tdi.co.jp/miso/outsystems-11-datagrid-1

OutSystemsは、Webアプリケーションを高速開発できるローコードプラットフォームです。本記事では、OutSystemsでの開発において、データをExcelのように一覧画面で直接編集ができる「OutSystems Data Grid(以下Data Grid)」について、機能やメリット、実装のポイントを解説します。

1. Data Gridチュートリアル

1-1. 使用するデータと完成イメージ

あらかじめ用意したEmployeeテーブル(従業員情報を格納するマスタのイメージ)を使用し(図1)、Data Gridに以下の機能を持たせたグリッドの実装方法を解説します(図2)。Employeeテーブルに関しては、以下はあくまで参考です。任意のEntityでも構いません。なお、今回実装するアプリはReactive Webアプリを前提としています。

• グリッド上でのデータ編集
• 行追加、行削除、変更の保存
• データソートの設定
• フィルターの設定

図1

図2

1-2. Forgeの追加と参照設定

事前にService StudioのForgeタブから、Data Gridのインストールを行う必要があります(図3)。

図3

Forgeのインストールについては「超高速開発基盤「OutSystems」のForgeの使い方」に掲載しています。ぜひ合わせてお読みください。

超高速開発基盤「OutSystems」のForgeの使い方 | MISO

https://www.tdi.co.jp/miso/rad-outsystems-forge

超高速開発基盤「OutSystems」が技術者向けに提供しているモジュールリポジトリ「OutSystems Forge」の使い方を、モジュール探しのコツを含めてご紹介します。

Service Studioから「Manage Dependencies」ダイアログを開き(図4)、Data Gridへの参照を追加します(図5)。今回は「OutSystems Data Grid」を選択し、すべての機能を追加します。

図4

図5

1-3. Data Gridに表示するデータの作成

Data Gridで取り扱うデータ型はJSON形式である必要があるため、グリッドで表示するデータを取得し、形式を変換して出力するDataActionを作成します(図6)。
DataActionには「EmployeeList(text型)」と、「IsFetched(Boolean型)」の2つのOutputパラメーターを作成します。

Logicタブの「Server Actions」に追加された「OutSystemsDataGrid」内にあるArrangeDataアクションを使ってJSON形式に変換します。
変換した結果のデータ(ArrangeData.DataJSON)と、データ取得結果(ArrangeData.Success)をDataActionの戻り値に設定します(表1)。

なお、ArrangeDataは、Data GridのForgeに同梱されているサーバーアクションです。このアクションは、引数として受け取ったデータを分析し、数値型や日付型などを判別した上で、グリッドに渡せるJSON形式へ自動で変換します。

図6

①Aggregateで、データを取得する。

②サーバーアクション内、ArrangeDataアクションを用いてJSON形式に変換する。

※ArrangeDataの引数にはオブジェクト型の値を指定する必要があるため、ToObject(対象のデータ)を用いてオブジェクト化する。

③変換したデータと、変換完了を示す変数をAssignで出力値に指定する。

表1　

1-4. 画面にGridを表示

「Grid」ウィジェットを画面にドラッグ＆ドロップし(図7)、Gridのプロパティを設定することで(表2)画面の表示が完了します(図8)。GridのUIパーツが見つからないときは、下記(図7)のように検索してみてください。この時点では、まだソートや行追加、行削除、変更の保存はできません。後述の1-5で、それらのプロパティ設定とアクションを作成することで、ソートや行追加などができるようになります。また、GridのUIパーツを設定した際には、プロパティの「Name」を入力してください。後述の1-5以降で「GridWidgetId」プロパティ欄に適時利用されます。

図7

表2

図8

1-5. データ操作のロジック作成

行追加や行削除、変更の保存には、そのためのアクションを作成します。
なお、行追加や行削除のアクションはGrid上のデータを操作するものです。画面を操作した結果のデータ更新処理は、「変更の保存」ボタンを押すと実行されます。

1-5-1. Gridのプロパティを設定

Gridでデータを編集できるようプロパティを設定します(図9)。詳細設定は、Gridのプロパティ「OptionalConfigs」を展開すると表示されます。ここで対象のプロパティをTrueに設定すると、データの編集やソート順の変更が可能になります(表3)。

図9

表3

1-5-2. 行追加のロジック作成

画面に「追加」ボタンを配置し、OnClickプロパティには、新しいクライアントアクションを作成します。作成したクライアントアクションに「Logicタブ>Client Actions」に追加されている「OutSystemsDataGrid」内から「AddNewRows」ウィジェットを配置し、プロパティを設定してください(図10)(表4)。
①は、Data Gridに行を追加するための「AddNewRows」アクションです。このアクションは、指定した数だけ行をGridに追加します。

ボタンを追加する箇所については特に指定はありませんが、今回は完成イメージ(図2)の位置にボタンを置きます。

※ボタン及びクライアントアクションの作成方法は、後述の行削除(1-5-3で説明)、変更保存(1-5-4で説明)も同様です。

図10

表4

1-5-3. 行削除のロジック作成

1-5-2同様、画面に「削除」ボタンを配置し、作成したクライアントアクションに「RemoveSelectedRows」ウィジェットを配置しプロパティを設定します(図11)(表5)。

①はData Gridの行を削除するための「RemoveSelectedRows」アクションです。このアクションは、選択された行(左上に三角がついている行)をGridから削除します。

図11

表5

1-5-4. 変更保存のロジック作成

1-5-2同様、画面に「保存」ボタンを配置し、作成したクライアントアクションに「GetChangedLines」ウィジェットを配置しプロパティを設定します(図12)(表6)。

図12

表6

①GetChangedLinesアクションを用いて、編集された行を自動で取得する。

※GetChangedLinesアクションは、ユーザーによって追加、削除、変更された行を3つにわけて取得する。出力型はテキスト型。

②GetChangedLinesで取得したデータを追加・削除・変更ごとに元のList形式に戻す。

③上記②で取得した追加、削除、変更の3つの「JSONDeserialize」の結果をもとに、該当Entityを更新する。　
※以下は、SaveGridDataというServer Actionを作成し、そのActionの引数として3つのJSONDeserializeの結果を引き渡して該当Entityを更新している一例である。(図13)

④DataActionをリフレッシュし、画面を更新する。

図13

2.まとめ

これでData Grid上での編集・ソートが可能なグリッドが完成しました。

Data Gridの基本的な使い方は以上になります。

ぜひ皆さまも本記事を元に、Data Gridの実装をお試しください。

tdiはローコード開発に力を入れていますので、ご興味をお持ちいただけましたら、以下のサービスページよりお気軽にお問い合わせください。

OutSystems

https://www.tdi.co.jp/outsystems/

ローコード開発基盤「OutSystems」で経営にかなうスピードをシステム開発に。OutSystemsは、豊富な導入、開発、運用・保守の実績と、国内トップクラスのOutSystems資格保有者数を誇るtdiにおまかせください。

OutSystems® とロゴはOutSystems-Software Em Rede S.A.の登録商標です。